<template>
  <div>
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="page">
      <div class="block">
        <div class="winbox">
          <chimage class="icon" :src="require('@/assets/img/ic_s.png')"></chimage>
          <div class="wintext">付款成功</div>
          <div class="group">
            <div class="item" v-for="(item,index) in member_list" :key="index">
              <chimage class="image" :src="item.header_pic"></chimage>
              <div class="text">{{item.member_name}}</div>
            </div>
          </div>
          <div v-if="groupOrderInfo.status==1" class="invite" @click="onHeaderMare">
            邀请好友参团,
            <span style="color:#AE2309">{{groupOrderInfo.remaining_time_str}}</span>后结束
          </div>
          <div v-if="isGroup" class="butbar">
            <div class="but" @click="onOrderTap">查看订单</div>
            <div class="but" @click="onMallTap">继续逛逛</div>
          </div>
        </div>
      </div>

      <!-- <div class="block">
        <div class="t-title">大家都在拼</div>
      </div>-->

      <!-- <div class="block">
        <div class="grid grid-gutter group">
          <div class="grid-1-2">
            <div class="item" @click="onInfo">
              <img>
              <div class="title">成熟洋槐蜜 500g</div>
              <div class="price">
                18900.00
                <div class="pricebag">3人团</div>
              </div>
              <div class="d-price">单买价:28900.00</div>
            </div>
          </div>
          <div class="grid-1-2">
            <div class="item" @click="onInfo">
              <img>
              <div class="title">成熟洋槐蜜 500g</div>
              <div class="price">
                18900.00
                <div class="pricebag">3人团</div>
              </div>
              <div class="d-price">单买价:28900.00</div>
            </div>
          </div>
          <div class="grid-1-2">
            <div class="item" @click="onInfo">
              <img>
              <div class="title">成熟洋槐蜜 500g</div>
              <div class="price">
                18900.00
                <div class="pricebag">3人团</div>
              </div>
              <div class="d-price">单买价:28900.00</div>
            </div>
          </div>
          <div class="grid-1-2">
            <div class="item" @click="onInfo">
              <img>
              <div class="title">成熟洋槐蜜 500g</div>
              <div class="price">
                18900.00
                <div class="pricebag">3人团</div>
              </div>
              <div class="d-price">单买价:28900.00</div>
            </div>
          </div>
        </div>
      </div>-->
    </div>
    <actionsheet v-model="isShowMore" :menus="menus" @on-click-menu="menusFun" :show-cancel="true"></actionsheet>
    <input
      type="text"
      readonly
      class="clipBoardContent"
      id="clipBoardContent"
      v-model="clipBoardContent"
    />
    <popup class="wxShare" v-model="isWxShare" height="100%">
      <div class="wxShareimgbox" @click="onwxShareimgbox">
        <img class="img" src="@/assets/img/wxtis.png" alt/>
      </div>
    </popup>
  </div>
</template>

<script>
  import Util from '@/utils/util'
  import WinXin from '@/dll/weixin'
  import Pay from '@/dll/pay'
  import baseUrl from '../../../../baseUrl'

  export default {
    name: '',
    data () {
      let isUleeCommunityAPP = Util.isUleeCommunityAPP()
      let menus = []
      if (isUleeCommunityAPP) {
        menus = [
          { label: '分享到微信', value: 'shareAppMessage' },
          { label: '分享到朋友圈', value: 'shareTimeline' }
        ]
      } else {
        menus = [{ label: '复制连接地址', value: 'copy' }]
      }
      return {
        xheader: {
          title: '拼团成功'
        },
        isGroup: true,
        isShowMore: false,
        isWxShare: false,
        menus: menus,
        member_list: [],
        groupOrderInfo: {},
        clipBoardContent: '',
        link: ''
      }
    },
    created () {
      this.order_sn = this.$route.query.order_sn
      this.isOrder = this.$route.query.isOrder
      this.link = baseUrl.link.SHARE + this.$route.params.id
      this.getInfo()
    },
    methods: {
      onwxShareimgbox () {
        this.isWxShare = false
      },
      onHeaderMare () {
        if (Util.isWeixn()) {
          // this.$vux.confirm.show({
          //   title: "提示",
          //   content: "请点击右上角菜单项里的分享按钮",
          //   showCancelButton: false
          // });
          this.isWxShare = true
        } else {
          this.isShowMore = true
        }
      },
      onInfo () {
        this.$router.replace({ name: 'mallGroupInfo' })
      },
      back () {
        if (this.isOrder == 'true') {
          this.$router.back()
        } else {
          this.$router.replace({
            name: 'mallOrder',
            params: { tabIndex: 1 }
          })
        }
      },
      onOrderTap () {
        this.back()
      },
      onMallTap () {
        this.$router.replace({ name: 'mall' })
      },
      async getInfo () {
        let param = {
          order_sn: this.order_sn
        }
        let res = await Pay.mallGroupOrderWin(param)
        if (res.code == 0) {
          this.member_list = res.data.member_list
          this.groupOrderInfo = res.data.groupOrderInfo
          this.clipBoardContent =
            location.href.split('#')[0] +
            '#/mall/group/info/' +
            res.data.groupOrderInfo.groupbuy_id
          if (Util.isWeixn() && this.groupOrderInfo.status == 1) {
            this.updateAppMessageShareData()
          }
        } else {
          this.$vux.confirm.show({
            title: '提示',
            content: res.msg,
            showCancelButton: false,
            onConfirm: () => {
              this.$router.back()
            }
          })
        }
      },
      updateAppMessageShareData () {
        let config = {
          title: this.groupOrderInfo.goods_name,
          desc: this.groupOrderInfo.subtitle,
          link: this.clipBoardContent,
          // link: this.link,
          imgUrl: this.groupOrderInfo.sku_image,
          success: () => {
          }
        }
        WinXin.updateAppMessageShareData(config)
      },

      menusFun (key, item) {
        let fun = {
          shareAppMessage: () => {
            let config = {
              type: 1,
              shareTitle: this.groupOrderInfo.goods_name,
              shareDescr: this.groupOrderInfo.subtitle,
              shareThumbImage: this.groupOrderInfo.sku_image,
              // shareWebPageUrl: this.clipBoardContent
              shareWebPageUrl: baseUrl.link.SHARE + this.$route.params.id
            }
            WinXin.ShareToWeiXin(config, () => {
            })
          },
          shareTimeline: () => {
            let config = {
              type: 2,
              shareTitle: this.groupOrderInfo.goods_name,
              shareDescr: this.groupOrderInfo.subtitle,
              shareThumbImage: this.groupOrderInfo.sku_image,
              // shareWebPageUrl: this.clipBoardContent
              shareWebPageUrl: baseUrl.link.SHARE + this.$route.params.id
            }
            WinXin.ShareToWeiXin(config, () => {
            })
          },
          copy: () => {
            let input = document.getElementById('clipBoardContent')
            const range = document.createRange()
            range.selectNode(input)
            const selection = window.getSelection()
            if (selection.rangeCount > 0) {
              selection.removeAllRanges()
            }
            selection.addRange(range)
            // input.select();
            // input.setSelectionRange(0, input.value.length);
            let isCopy = document.execCommand('copy')
            if (isCopy) {
              this.$vux.alert.show({
                title: '提示',
                content: '连接已复制,去粘贴吧！'
              })
            } else {
              this.$vux.alert.show({
                title: '提示',
                content: '浏览器不支持，请手动复制。'
              })
            }
          }
        }
        if (fun[item.value]) {
          fun[item.value]()
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .wxShare {
    background-color: rgba(45, 45, 45, 0.3);

    .wxShareimgbox {
      height: 100%;

      .img {
        width: 100%;
      }
    }
  }

  .winbox {
    background-color: #fff;
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .winbox .icon {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    display: block;
  }

  .winbox .wintext {
    font-size: 17px;
    color: #04ac67;
    line-height: 24px;
    margin-top: 12px;
    font-weight: 600;
  }

  .winbox .group {
    margin-top: 40px;
    display: flex;
    width: 100%;
  }

  .winbox .group .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .winbox .group .item .image {
    display: block;
    height: 40px;
    width: 40px;
    border-radius: 20px;
    background-color: #f5f5f5;
    box-sizing: border-box;
  }

  .winbox .group .item .image.none {
    background-color: #fff;
    border: 1px solid #e6e6e6;
  }

  .winbox .group .item .text {
    margin-top: 8px;
    font-size: 14px;
    color: #351009;
    line-height: 20px;
  }

  .winbox .invite {
    margin-top: 40px;
    height: 40px;
    text-align: center;
    font-size: 14px;
    color: #351009;
    line-height: 38px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d4d4d4;
  }

  .t-title {
    margin-top: 12px;
    font-size: 15px;
    color: #351009;
    line-height: 21px;
  }

  .pricebag {
    text-align: center;
    margin-left: 5px;
    vertical-align: middle;
    display: inline-block;
    height: 16px;
    width: 36px;
    line-height: 14px;
    font-size: 10px;
    color: #b02910;
    border: 1px solid #b02910;
    box-sizing: border-box;
  }

  .group .item {
    display: block;
    background-color: #fff;
    padding: 12px;
    box-sizing: border-box;
  }

  .group .item > image {
    display: block;
    height: 145px;
    width: 100%;
    background-color: #fbf8f7;
  }

  .group .item > .title {
    margin-top: 16px;
    font-size: 12px;
    color: #9f8d89;
    line-height: 17px;
  }

  .group .item > .price {
    margin-top: 16px;
    font-size: 14px;
    color: #ae2309;
    line-height: 16px;
  }

  .group .item > .d-price {
    margin-top: 6px;
    font-size: 10px;
    color: #d3cbc9;
    line-height: 14px;
    text-decoration: line-through;
  }

  .butbar {
    margin-top: 40px;
    display: flex;
  }

  .butbar .but {
    box-sizing: border-box;
    border: 1px solid #d4d4d4;
    height: 40px;
    width: 120px;
    line-height: 38px;
    font-size: 14px;
    color: #351009;
    text-align: center;
  }

  .butbar .but + .but {
    margin-left: 24px;
  }
</style>
